<template>
	<view class="container write-off-log-container">
		<view class="page-top">
			<view class="page-top-btn" :class="pageType==='ZS'&&'page-top-active'" @click="pageTypeChange('ZS')">专属券
			</view>
			<view class="page-top-btn" :class="pageType==='TY'&&'page-top-active'" @click="pageTypeChange('TY')">通用券
			</view>
		</view>
		<view class="page-filter yuan-form">
			<view class="yuan-form-list">
				<picker class="yuan-form-picker" mode="date" fields="month" @change="bindMonthDateChange">
					<view class="yuan-picker-row">
						<template v-if="monthDate">
							<view class="yuan-input" v-if="monthDate">{{monthDate}}</view>
							<!-- <text class="iconfont" @click.stop="cleanDate">&#xe609;</text> -->
							<text class="iconfont">&#xe775;</text>
						</template>
						<template v-else>
							<view class="placeholder-style">按日期筛选</view>
							<text class="iconfont">&#xe775;</text>
						</template>
					</view>
				</picker>

			</view>
		</view>
		<view class="page-main">
			<view class="page-list">
				<!-- <view class="list-date">2025年7月</view> -->
				<view class="list-total">
					<view style="margin-right: 50rpx;">
						<text class="total-title">核销券数:</text>
						<text class="total-info">{{verifyCount}}张</text>
					</view>
					<view>
						<text class="total-title">核销金额:</text>
						<text class="total-info">¥{{$toYuan(verifyAmount)}}</text>
					</view>
				</view>
				<view class="list-log">
					<view class="list-log-item" v-for="user in pageList" :key="user.id"
						@click="jump('/pagesWorker/writeOff/writeOffDetail?id='+user.id)">
						<image class="list-log-img" :src="user.headPortrait" mode="widthFix"
							@error="$handleImageError(user,'headPortrait')"></image>
						<view class="list-log-content">
							<view class="list-log-acc">{{user.userName}}</view>
							<view class="list-log-couponname">{{user.couponName}}</view>
							<view class="list-log-date">{{$format(user.chargeOffTime)}} </view>
						</view>
						<view>
							<text class="list-log-unit">¥</text>
							<text class="list-log-price">{{$toYuan(user.couponMoney)}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="not-more" v-if="isLoading">加载中...</view>
			<view class="null-page" v-else-if="pageList.length<=0 ">
				<text class="iconfont">&#xe642;</text>
				<view class="null-page-tips">暂无数据~</view>
			</view>
			<view class="not-more" v-else-if="notMore">没有更多了...</view>
		</view>
	</view>
</template>


<script lang="ts" setup>
	import { onMounted, ref } from 'vue';
	import { format, hideLoading, showLoading } from '../../common/util';
	import { onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app"
	import userApi from '../../common/userApi';
	const monthDate = ref('')
	const isLoading = ref(false)
	const notMore = ref(true)
	const pageSize = 10
	let pageNum = 1
	const pageList = ref([])
	onMounted(async () => {
		monthDate.value = format(new Date(), 'yyyy-MM')
		await getPageList()
	})

	const loadMore = () => {
		if (isLoading.value) return
		if (notMore.value) return
		pageNum = pageNum + 1
		getPageList()
	}
	const refreshList = () => {
		notMore.value = false
		pageNum = 1
		pageList.value = []
		getPageList()
	}
	onReachBottom(() => {
		loadMore()
	})
	onPullDownRefresh(() => {
		refreshList()
		uni.stopPullDownRefresh()
	})
	const verifyAmount = ref(0)
	const verifyCount = ref(0)
	const getPageList = async () => {
		showLoading()
		isLoading.value = true
		try {
			const params = { pageNum, pageSize }
			const date = monthDate.value.split('-')
			const res = await userApi.verifyRecordsLog({
				couponType: pageType.value === 'ZS' ? '专属券' : '通用券',
				year: date[0],
				month: date[1]
			})
			const rows = res.data?.records || {}
			if (rows.length < pageSize) notMore.value = true
			pageList.value = rows
			verifyAmount.value = res.data.verifyAmount
			verifyCount.value = res.data.verifyCount
		} finally {
			isLoading.value = false
			hideLoading()
		}
	}
	const pageType = ref('ZS')
	const pageTypeChange = (type : string) => {
		if (pageType.value === type) return
		pageType.value = type
		refreshList()
	}
	const bindMonthDateChange = (e : any) => {
		monthDate.value = e.detail.value
		refreshList()
	}
	const cleanDate = () => {
		monthDate.value = ""
	}
	const jump = (url : string) => {
		uni.navigateTo({ url: url })
	}
</script>


<style lang="scss">
	.write-off-log-container {
		background-color: #F2F3F8;
		padding-bottom: 120rpx;

		.page-top-btn {
			background-color: #F5F6FA;
			width: 50%;
			display: inline-block;
			text-align: center;
			height: 88rpx;
			line-height: 88rpx;
			color: #6D6D6D;
			font-size: 30rpx;
			font-weight: bold;
			position: relative;
		}

		.page-top-active {
			background-color: #fff;
			color: #080808;
		}

		.page-top-active::after {
			content: '';
			width: 80rpx;
			height: 8rpx;
			background-color: #3AD3C1;
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			margin: auto;
			border-radius: 4rpx;
		}

		.page-filter {
			padding: 0 30rpx;
		}

		.page-main {
			padding: 0 30rpx;
		}

		.page-list {
			margin-bottom: 20rpx;
			padding: 20rpx 0;
		}

		.list-date {
			font-size: 30rpx;
			color: #222222;
			padding: 20rpx 0;
		}

		.list-total {
			font-size: 24rpx;
			display: flex;
		}

		.total-title {
			color: #6D6D6D;
		}

		.total-info {
			color: #222222;
			font-weight: bold;
		}

		.list-log {
			background-color: #fff;
			border-radius: 8rpx;
			margin-top: 20rpx;
			box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.1);
		}

		.list-log-item {
			display: flex;
			border-bottom: solid 1px #eee;
			padding: 20rpx;
		}

		.list-log-item:last-child {
			border-bottom: unset;
		}

		.list-log-img {
			width: 70rpx;
			height: 70rpx;
		}

		.list-log-content {
			flex-grow: 1;
			margin-left: 20rpx;
		}

		.list-log-acc {
			font-size: 30rpx;
			color: #222222;
		}

		.list-log-couponname {
			font-size: 24rpx;
			color: #383838;
			margin: 15rpx 0;
		}

		.list-log-date {
			font-size: 22rpx;
			color: #6D6D6D;
		}

		.list-log-unit {
			font-weight: 500;
			font-size: 20rpx;
			color: #FF8815;
		}

		.list-log-price {
			font-weight: 500;
			font-size: 44rpx;
			color: #FF8815;
		}

		.yuan-picker-row {
			.iconfont {
				font-size: 30rpx;
				padding: 10rpx;
				margin-left: 0;
				transform: translateY(-2rpx);
			}
		}
	}
</style>